<template>
  <div class="Rating-gray">
    <i
      v-for="(item, index) in itemClasses"
      :key="index"
      class="fa"
      :class="item"
    ></i>
  </div>
</template>

<script>
const LENGTH = 5; // 星星长度
const CLS_ON = "fa-star"; // 星星class
const CLS_HALF = "fa-star-half-empty"; // 半个星星的class
const CLS_OFF = "fa-star-o"; // 整个星星的class

export default {
  name: "Rating",

  props: {
    rating: Number,
  },

  computed: {
    itemClasses() {
      let result = [];
      // 乘2除2的原因就是，比如 =》 4.8 * 2 / 2 = 4.5
      let score = Math.floor(this.rating * 2) / 2;
      // 先把整数取出来，也就是一整个星星取出来
      let interger = Math.floor(score);
      // 是否存在半个星星 hasDecimal 是个布尔值类型
      let hasDecimal = score % 1 !== 0;
      // 先把整个星星推进数组
      for (let i = 0; i < interger; i++) {
        result.push(CLS_ON);
      }
      // 再处理半星 因为半星只会存在一个 所以不需要遍历 直接判断推进即可
      if (hasDecimal) {
        // 说明存在半星
        result.push(CLS_HALF);
      }
      // 补齐星星 星星的总长度是5 如果不补齐星星的话 那么3.8的评分只会显示4个星星 不符合要求
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    },
  },
};
</script>

<style scoped>
.Rating-gray {
  margin-right: 1.066667vw;
  color: #ffbe00;
  display: inline-block;
}
</style>